let wechatUserId = sessionStorage.getItem('userId');
let companyId = sessionStorage.getItem('companyId');
let deviceCode = sessionStorage.getItem('deviceCode');
let deviceType = sessionStorage.getItem('deviceType');
let dataType = 2011;
let tempDataTitleCode = [];
// 当前选中的柱子索引
let currentSelectedIndex = null;
let userModuleIdList = sessionStorage.getItem("userModuleIdList");

$(function () {
    if (null === wechatUserId || wechatUserId === '') {
        wechatUserId = sessionStorage.getItem('loginWeChatUserId');
    } else {
        sessionStorage.setItem('loginWeChatUserId', wechatUserId);
    }

    // 初始化选项卡
    initTabs();

    let defaultDataType = sessionStorage.getItem('selectDataType');

    if (null !== defaultDataType && !isNaN(defaultDataType)) {
        changeDataType(defaultDataType);
    } else {
        changeDataType(2011);
    }

    loadDeviceList();

    // 获取分析报告
    if (userModuleIdList.includes('@' + alarmReportIndex + '@')) {
        loadReportData();
    } else {
        $('#alarmReportDiv').css('display', 'none').next().css('display', 'none');
    }

    // 窗口大小改变时自适应
    window.addEventListener('resize', () => {
        myChart.resize();
        $('#customLegend').css('display', 'none');
    });

    if (userModuleIdList.includes('@' + deviceEmissionIndex + '@')) {
        // 初始化
        initChart();
        updateChart();
    } else {
        $('#balanceTitle').css('display', 'none');
        $('#balanceTable').css('display', 'none');
    }
});

function loadDeviceList() {
    // 先根据公司ID和用户ID加载出所有的设备列表
    $.post(serverUrl + ':' + serverPort + serverName + '/companyUser/iFindDeviceListByUserIdAndCompanyId', {
        userId: wechatUserId, companyId: companyId, type: dataType, isNeedData: 1
    }, function (result) {
        let content = '';
        let obj = JSON.parse(result);

        if (obj.code === 0) {
            $.each(obj.data, function (i, item) {
                if (item.code === deviceCode) {
                    content += '<option value="' + item.code + '" selected>' + item.name + '</option>'
                } else {
                    content += '<option value="' + item.code + '">' + item.name + '</option>'
                }
            });

            $('#deviceList').html(content);
        }
    });
}

function changeDataType(type) {
    dataType = type;

    // 根据选中的数据类型自动改变样式
    changeTab(type);

    loadDeviceData();
}

function changeDevice() {
    deviceCode = $('#deviceList').val();
    sessionStorage.setItem('deviceCode', deviceCode);

    loadDeviceData();

    updateChart();

    loadReportData();
}

function loadDeviceData() {
    showLoading();

    tempDataTitleCode = [];

    // 先根据公司ID和用户ID加载出所有的设备列表
    $.post(serverUrl + ':' + serverPort + serverName + '/data/iFindListByDeviceCodeAndType', {
        deviceCode: deviceCode, type: dataType
    }, function (result) {
        hideLoading();

        let obj = JSON.parse(result);

        if (obj.code === 0) loadDeviceTableData(obj.data.reverse());
    });
}

function loadDeviceTableData(data) {
    // 创建全局表头映射和顺序数组
    const globalHeaderMap = new Map(); // 存储表头信息：code => {name, unit}
    const headerOrder = [];           // 存储表头顺序

    // 第一步：收集所有可能的表头信息（不重复）
    $.each(data, function (o, deviceInfo) {
        $.each(deviceInfo, function (i, item) {
            if (item.code !== 'CP_MN' && item.code !== 'time' && !globalHeaderMap.has(item.code)) {
                // 存储表头信息
                globalHeaderMap.set(item.code, {
                    name: item.name, unit: item.unit, code: item.code
                });
                // 记录字段顺序
                headerOrder.push(item.code);
            }
        });
    });

    // 第二步：构建统一的表头
    const tempDataTitle = [];

    $.each(headerOrder, function (i, code) {
        const headerInfo = globalHeaderMap.get(code);
        if (headerInfo.unit && headerInfo.unit.length > 0) {
            tempDataTitle.push(headerInfo.name + '（' + headerInfo.unit + '）');
        } else {
            tempDataTitle.push(headerInfo.name);
        }

        tempDataTitleCode.push(headerInfo.code);
    });

    // 第三步：按照统一表头顺序构建数据行
    const finallyArray = [];

    $.each(data, function (o, deviceInfo) {
        const tempInfo = [];
        const deviceValueMap = new Map();

        // 创建当前设备的值映射：code => value
        $.each(deviceInfo, function (i, item) {
            if (item.code !== 'CP_MN' && item.code !== 'time') {
                deviceValueMap.set(item.code, {
                    value: item.value, isTime: item.code === 'CP_DataTime'
                });
            }
        });

        // 按照统一表头顺序获取值
        $.each(headerOrder, function (i, code) {
            const valueInfo = deviceValueMap.get(code);

            if (valueInfo) {
                if (valueInfo.isTime) {
                    tempInfo.push(changeStrTime(valueInfo.value));
                } else {
                    tempInfo.push(valueInfo.value);
                }
            } else {
                // 如果设备没有该字段，填充空值
                tempInfo.push('');
            }
        });

        finallyArray.push(tempInfo);
    });

    // 开始绑定数据到表格中
    createTable('detailTable', tempDataTitle, finallyArray);
    bindClickEvent();
}

let myChart = null;

// 初始化图表
function initChart() {
    const chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);

    const option = {
        tooltip: {
            trigger: 'axis', axisPointer: {
                type: 'shadow'
            }
        }, legend: {
            show: false // 隐藏默认图例
        }, xAxis: {
            type: 'category', axisLabel: {
                rotate: 45, fontSize: 12
            }
        }, yAxis: {
            type: 'value'
        }, series: [{
            name: '已用量', type: 'bar', stack: 'total', itemStyle: {
                color: '#e35c5c'
            }
        }, {
            name: '可用量', type: 'bar', stack: 'total', itemStyle: {
                color: '#4CAF50'
            }
        }]
    };

    myChart.setOption(option);

    // 隐藏图例当点击其他位置时
    chartDom.addEventListener('click', (e) => {
        if (!e.target.closest('.echarts-bar')) {
            $('#customLegend').css('display', 'none');
        }
    });
}

// 更新图表
function updateChart() {
    $.post(serverUrl + ':' + serverPort + serverName + '/deviceSummary/deviceDataStatic', {
        companyId: sessionStorage.getItem('companyId'), deviceCode: sessionStorage.getItem('deviceCode'), type: deviceType
    }).done(function (obj) {
        let result = JSON.parse(obj);

        const names = [];
        const totalUsedValues = [];

        if (result.code === 0 && result.data.length > 0) {
            $.each(result.data, function (i, item) {
                names.push(item.codeDictName);
                totalUsedValues.push(item.totalUsedCount);
            });

            // 图表配置
            const option = {
                tooltip: {
                    trigger: 'axis', axisPointer: {type: 'shadow'}, backgroundColor: 'rgba(0,0,0,0.7)',  // 添加背景色
                    borderWidth: 0,                      // 去除边框
                    padding: 10,                         // 增加内边距
                    textStyle: {
                        color: '#FFF', fontSize: 12
                    }, formatter: function (params) {
                        // 正确获取值并转为数值类型
                        const used = Number(params[0].value);    // 已使用量（系列0）
                        const category = params[0].name;

                        // 格式化工件内容
                        return `<div style="font-weight:bold;">${category}</div><div style="margin-top:5px;"><span style="display:inline-block;width:10px;height:10px;background:#FF3333;"></span>已使用: ${used.toLocaleString()}Kg</div>`;
                    }, // 关键设置：手动控制tooltip显示
                    show: true, alwaysShowContent: false, triggerOn: 'click', hideDelay: 0
                }, legend: {
                    data: ['已使用量'], textStyle: {
                        color: '#808080'
                    }, right: 20, top: 10, itemWidth: 16, itemHeight: 8
                }, grid: {
                    left: '3%', right: '4%', bottom: '10%', top: '15%', containLabel: true
                }, xAxis: {
                    type: 'category', data: names, axisLine: {lineStyle: {color: '#ccc'}}, axisLabel: {color: '#666', fontSize: 12}, axisTick: {show: false}
                }, yAxis: {
                    type: 'value', name: 'Kg', nameTextStyle: {color: '#666', fontSize: 12}, axisLine: {show: false}, axisLabel: {color: '#666', fontSize: 12}, splitLine: {lineStyle: {color: 'rgba(0,0,0,0.05)'}}
                }, series: [{
                    name: '已使用量', type: 'bar', stack: 'stack1', data: totalUsedValues, barWidth: '35%', itemStyle: {
                        color: '#FF3333', borderRadius: [0, 0, 6, 6]
                    }, label: {
                        show: false, position: 'top', formatter: '{c}', color: '#FF3333', fontWeight: 'bold', fontSize: 12
                    }, emphasis: {
                        itemStyle: {
                            shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 10
                        }
                    }
                }], animation: true, animationDuration: 800, animationEasing: 'cubicOut'
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            // 关键：实现点击柱子持续显示tooltip
            myChart.on('click', function (params) {
                // 如果点击的是柱子
                if (params.componentType === 'series' && params.seriesType === 'bar') {
                    currentSelectedIndex = params.dataIndex;

                    // 显示tooltip
                    myChart.dispatchAction({
                        type: 'showTip', seriesIndex: 0, dataIndex: currentSelectedIndex
                    });
                }
            });

            // 点击空白区域隐藏tooltip
            myChart.getZr().on('click', function (event) {
                // 如果没有点击到图形元素
                if (!event.target) {
                    currentSelectedIndex = null;
                    myChart.dispatchAction({
                        type: 'hideTip'
                    });
                }
            });

            // 响应窗口大小变化
            window.addEventListener('resize', function () {
                myChart.resize();
            });

            $('#balanceTitle').css('display', '');
            $('#balanceTable').css('display', '');
        } else {
            // 没有数据则移除表格控件
            $('#balanceTitle').css('display', 'none');
            $('#balanceTable').css('display', 'none');
        }
    }).fail(function (xhr, status, error) {
        console.log("请求失败！");
        console.log("错误信息：" + error);

        // 没有数据则移除表格控件
        $('#balanceTitle').css('display', 'none');
        $('#balanceTable').css('display', 'none');
    });
}

// 加载分析报告
function loadReportData() {
    showLoading();

    // 先根据公司ID和用户ID加载出所有的设备列表
    // type为1=该公司的总体情况报告，2=制定某个设备的情况报告，3=指定某个设备的指定参数的情况报告
    $.post(serverUrl + ':' + serverPort + serverName + '/alarmMessage/iGetReportByParams', {
        companyId: sessionStorage.getItem("companyId"), deviceCode: sessionStorage.getItem("deviceCode"), type: 2
    }, function (result) {
        hideLoading();

        let obj = JSON.parse(result);

        $('#reportContent').html(obj.data);
    });
}

// 绑定点击事件
function bindClickEvent() {
    $.each($('#detailTable').children().last().children(), function (trIndex, trItem) {
        $.each($(trItem).children(), function (tdIndex, tdItem) {
            // 普通绑定
            $(tdItem).on("click", function (event) {
                if (tdItem.getAttribute("data-index") !== '0') {
                    sessionStorage.setItem('companyId', companyId);
                    sessionStorage.setItem('userId', wechatUserId);
                    sessionStorage.setItem('deviceCode', deviceCode);
                    sessionStorage.setItem('selectDataType', dataType);
                    sessionStorage.setItem('codeDictCode', tempDataTitleCode[tdIndex]);

                    window.location.href = 'wx/project/data';
                }
            });
        });
    });
}